<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>系统用户管理</title>
		<link rel="stylesheet" href="../../js/bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
		<link rel="stylesheet" href="../../js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
		<link rel="stylesheet" href="../../js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
		<link rel="stylesheet" href="../../js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">

		<script src="../../js/bower_components/jquery/dist/jquery.min.js"></script>
		<script src="../../js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="../../js/bower_components/bootbox.min.js"></script>
		<script src="../../js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="../../js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
		<script src="../../js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
		<script src="../../js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

		<script src="../../js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="../../js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
		<script src="../../js/bower_components/moment/min/moment-with-locales.min.js"></script>
		<script>
			$(function() {
				var User="";
				$.ajax({
					type: "get",
					//url: "sysUser.json",
					url:"http://121.37.241.58:8883/logic/baseInfo/employee/find",
					dataType: "json",
					success: function(rs) {
						//检索到有json文件后并获取数据成功的返回值
						console.log(rs);
						//调用创建列表方法
						CreateTable(rs);
					}
				});
				initDicType()
				
				$("#btnadd").click(function(){
					//打开模态框
					$("#divUserFrom").modal()
				})
				//查询
				$("#btnSearch").click(function(){

					//获取查询输入的条件
					var name=$("#txtUid").val()
					var detp=$("#deptSel").selectpicker('val');
					console.log(name+"----"+detp);
					//对查询条件进行匹配
					var sql=""
					if(name!=null){
						sql+="namecn="+name;
					}
					if(detp!=-1){
						if(sql!=null){
							sql+="&"
						}
						sql+="detp="+detp
					}
					console.log(sql)
					//将数据传输到后台
					$.ajax({
						type:"get",
						url:"http://121.37.241.58:8883/logic/baseInfo/employee/find?"+sql,
						dataType:"json",
						success:function(rs){
							//检索到有json文件后并获取数据成功地返回值
							console.log(rs);
							//调用创建列表方法
							CreateTable(rs);
						}
					});
					initDictType()
					$("btnadd").click(function(){
						$("#divUserFrom").modal()
					})
				})
				$("#btnUpdate").click(function(){
					console.log("进入修改方法")
					console.log(User);
					var oneUser=getUser();
					console.log(oneUser);
					
					//给表单控制赋值
					$("#txtUser").val(oneUser.namecn)
					$("#txtEmpno").val(oneUser.empno)
					$("#selDetp").val(oneUser.empno)
					$("#userID").val(oneUser.id)
					
					//显示模态框
					$("#divUserFrom").modal()
				})
			})

			function initDicType() {
				$("#deptSel").empty();
				$("#selDept").empty();

				
				$.ajax({
					type: "get",
					//url: "dept.json",
					url:"http://121.37.241.58:8883/logic/baseInfo/employee/deptList",
					dataType: "json",
					success: function(rs) {
						//获取加载数据
						console.log(rs);
						//将数据读取在下列列表当中
						$.each(rs, function(i, n) {
							console.log(i + "====" + n.dept)
							$("#deptSel").append("<option value=" + n.dept+">"+n.dept + "</option>");
							$("#selDept").append("<option value=" + n.dept+">"+n.dept + "</option>");
						})
						$("#deptSel").selectpicker('refresh');
						$("#selDept").selectpicker('refresh');
					}
				});
				option = new Option("全部", -1);
				$("#deptSel").append(option);
				$("#deptSel").selectpicker('refresh');
				$("#deptSel").selectpicker('render')
			}
			//将数据绑定在列表当中
			function CreateTable(myData) {
				console.log("进入表格数据绑定方法")
				$("#tblRest").bootstrapTable('destroy');
				$("#tblRest").bootstrapTable({
					loadMsg: '数据正在加载中....',
					data: myData,
					contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
					idFiled: "id",
					checkboxHeader: true,
					singleSelect:true,
					onClickRow:function(row){
						console.log(row);
						console.log(row.id);
						User=row;
					},
					singleSelect:true,
					onClickRow:function(row){
						console.log(row);
						console.log(row.id);
						User=row;
					},
					columns: [{
						field: "state",
						checkbox: true,
						align: 'center'
					}, {
						field: "namecn",
						title: "员工姓名",
						align: 'center'
					}, {
						field: "empno",
						title: "员工编号",
						align: 'center'
					}, {
						field: "dept",
						title: "所属部门",
						align: 'center'
					}]
				});
			}
			function getUser(){
				console.log("通过函数获取选中的行信息")
				var user=$("#tblRest").BootstrapTable('getSelections');
				console.log(user)
				if(user.length>0){
					return user[0];
				}else{
					
					alert("必须要先选中一条信息，才能修改");
				}
			}
				
			//获取列表中的信息
			function getUser(){
				console.log("通过函数选中的信息")
				var user=$("#tblRest").bootstrapTable('getSelections');
				console.log(user)
				if(user.length>0){
					return user[0];
				}else{
					alert("必须要先选中一条信息，才能进行修改")
				}
			}
		</script>

	</head>
	<body>
		<div class="container-fluid">
						<!-- 查询区域 -->
			<div class="row col-md-10" alian="">
				<div id="divSelect" class="form-inline">
					<div class="form-group">
						<label class="control-label" for="txtUid">用户名</label>
						<input type="text" id="txtUid" class="form-control" />
					</div>&nbsp;&nbsp; &nbsp;
					<div class="form-group">
						<label class="control-label" for="deptSel">部门</label>
						<select id="deptSel">
							
						</select>
					</div>&nbsp;&nbsp; &nbsp;
					<div class="form-group">
						<button type="button" id="btnSearch" class="btn btn-primary">查询</button>
					</div>
				</div>
			</div>
			<!--功能区域 -->
			<div class="row col-md-10" style="margin-top: 5px;">
				<button type="button" id="btnadd" class="btn btn-success">新增</button>
				<button type="button" id="btnUpdate" class="btn btn-info">修改</button>
				<button type="button" id="btnImp" class="btn btn-info">导入</button>
				<button type="button" id="btnExmp" class="btn btn-danger">导出</button>
			</div>
			<!--列表区域  -->
			<div class="row col-md-10">
				<table id="tblRest"></table>
		</div>
	</body>
			<!--添加模态控件-->
			<div class="modal fade" id="divUserFrom" role="dialog" tabindex="-1" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<!--定义模态框中的标题-->
						<div class="modal-header">
							<button type="button" class="close" data-disiss="model" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myTitle">用户信息</h4>
						</div>
						<!--定义模态框中的表单-->
						<div class="modal-body form-inline">
							<div class="form-group">
								<label class="control-label" for="textUser">用户名</label>
								<input type="text" id="txtUser" class="form-control" style="width: 230px;"maxlength="10"/>
							</div>
							<div class="form-group">
								<label class="control-label">员工编号</label>
								<input type="text" id="txtEmpno" class="form-control" style="width: 230px;"maxlength="10"/>
							</div>
							<br />
							<div class="form-group">
								<label class="control-label" for="selDept">部&nbsp;&nbsp;&nbsp;&nbsp;门</label>
								<select id="selDept"></select>
							</div>
							<!--定义模态框底部内容-->
							<div class="modal-footer">
								<input type="hidden"id="userID" />
								<button type="button" class="btn btn-default">取消</button>
								<button type="button" class="btn btn-primary">保存</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>